<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>管理员上传相关调查报告</title>
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../element/index.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="../../css/table.css">

<body>
    <div id="app">
        <!-- 搜索区域 -->
        <el-row style="color: #B8860B;">
            <el-col :span="6">
              最小年龄: <el-input-number v-model.number="minAge" :min="0" :max="150" label="最小年龄" controls-position="right"
                  placeholder="请输入最小年龄"></el-input-number>
          </el-col>
          <el-col :span="6">
              最大年龄: <el-input-number v-model.number="maxAge" :min="0" :max="150" label="最大年龄" controls-position="right"
                  placeholder="请输入最大年龄"></el-input-number>
          </el-col>
          <el-col :span="6">
              <el-input v-model="name" placeholder="对原因和名字进行检索" style="color: #B8860B;"></el-input>
          </el-col>
          <el-col :span="6">
              <el-button @click="searchReports" type="primary">搜索</el-button>

          </el-col>
        <!-- 举报案例表格 -->
        <el-table :data="reportList" class="zebra-table" style="width: 100%" row-key="reportId">
            <el-table-column prop="donationId" label="募捐单ID"></el-table-column>
            <el-table-column label="举报对象" prop="donationImage">
                <template slot-scope="scope">
                    <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                    <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                </template>
            </el-table-column>
            <el-table-column prop="donationReason" label="原因"></el-table-column>
            <el-table-column prop="deadline" label="截止时间"></el-table-column>
            <el-table-column prop="donationAmount" label="募捐目标金额"></el-table-column>
            <el-table-column prop="donatedAmount" label="已募捐金额"></el-table-column>
            <el-table-column prop="materialPoints" label="救助积分"></el-table-column>
            <el-table-column prop="reportId" label="举报单号">
                <template slot-scope="scope">
                  <span :style="{ color: '#B8860B' }">{{ scope.row.reportId }}</span>
                </template>
              </el-table-column>              
            <el-table-column prop="reportReason" label="举报原因"></el-table-column>
            <el-table-column prop="reportReasonInfo" label="举报原因"></el-table-column>
            <el-table-column prop="phone" label="联系方式"></el-table-column>
            <el-table-column prop="status" label="举报状态"></el-table-column>

                <el-table-column label="操作" fixed="right" width="300px">
                    <template slot-scope="scope">
                        <div class="btn-group" style="display: flex; justify-content: space-between;"> <el-button
                                type="primary" @click="downloadReport(scope.row.reportId)" style="margin-bottom: 10px;">下载报告</el-button>
                                <el-button type="warning" @click="handleUpload(scope.row.reportId)" v-if="scope.row.status === '待处理' && !scope.row.reply" style="margin-bottom: 10px;">上传报告</el-button>
                                <el-button type="danger" @click="rejectReport(scope.row.reportId)" v-if="scope.row.status === '未处理' && !scope.row.reply" style="margin-bottom: 10px;">驳回举报</el-button>
                                <el-button type="info" @click="changeReportStatus(scope.row.reportId, scope.row.status)" v-if="scope.row.status === '待处理'" style="margin-bottom: 10px;">切换状态</el-button>
                                <el-button type="info" @click="changeReportStatus(scope.row.reportId, scope.row.status)" v-if="scope.row.status === '未处理'" style="margin-bottom: 10px;">切换状态</el-button>
                        </div>
                    </template>
                </el-table-column>
                
        </el-table>
    </div>

    <script>
        var userId = localStorage.getItem('userId')
        new Vue({
            el: '#app',
            data: {
                searchStatus: '未处理',
                name: '',
                minAge: '',
                maxAge: '150',
                name: '',
                reportList: []
            },
            created(){
                this.searchReports()
            },
            methods: {
                searchReports() {
                    axios.get('http://localhost:8888/api/report/reportDonationList', {
                        params: {
                            minAge: this.minAge,
                            maxAge: this.maxAge,
                            name: this.name,
                        }
                    }).then(response => {
                        if (response.data.code === 0) {
                            this.reportList = response.data.data;
                            this.calculateCompletion()
                        } else {
                            this.reportList = [];
                            console.log(response.data.message);
                        }
                    }).catch(error => {
                        console.error('搜索失败:', error);
                    });
                },
                //上传文件
                handleUpload(reportId) {
                    this.$refs.fileInput.click();
                    this.reportId = reportId;
                },
                handleFileChange(event) {
                    const file = event.target.files[0];
                    const formData = new FormData();
                    formData.append('file', file);
                    formData.append('reportId', this.reportId);

                    // 发送文件和报告ID到后端接口
                    axios.post('http://localhost:8888/api/report/upload', formData)
                        .then(response => {
                            this.$message.success(response.data.message)
                        })
                        .catch(error => {
                            this.$message.success(response.data.error)
                        });
                },
                downloadReport(reportId) {
                    // 下载报告文件的逻辑
                    fetch(`http://localhost:8888/api/report/download?reportId=${reportId}`)
                        .then(response => response.blob())
                        .then(blob => {
                            const url = window.URL.createObjectURL(blob);
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute('download', 'dontionFile.pdf');
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        })
                        .catch(error => {
                            this.$message.error("文件不存在")
                            console.error('Error downloading file:', error);
                            // 处理下载失败的情况
                        });
                },

                changeReportStatus(reportId, newStatus) {
                    console.log(newStatus);
                    let url = newStatus === '处理中' ? 'http://localhost:8888/api/report/changeStateBySuperAdmin' : 'http://localhost:8888/api/report/changeStateByAdmin';
                    axios.post(url, null, {
                        params: {
                            reportId: reportId
                        }
                    }).then(response => {
                        if (response.data.code === 0) {
                            this.searchReports();
                            this.$message.success('状态更新成功');
                        } else {
                            this.$message.error('状态更新失败: ' + response.data.message);
                        }
                    }).catch(error => {
                        this.$message.error('状态更新失败: ' + error);
                    });
                },
                rejectReport(reportId) {
                    // 驳回举报的逻辑
                    axios.post('http://localhost:8888/api/report/reject', null, {
                        params: {
                            reportId: reportId
                        }
                    }).then(response => {
                        if (response.data.code === 0) {
                            this.searchReports();
                            this.$message.success('举报驳回成功');
                        } else {
                            this.$message.error('举报驳回失败: ' + response.data.message);
                        }
                    }).catch(error => {
                        this.$message.error('举报驳回失败: ' + error);
                    });
                },
                calculateCompletion() {
                    this.reportList.forEach(item => {
                        // 截取日期部分，只保留年月日
                        item.deadline = item.deadline.substring(0, 10);
                    });
                },
            
            }
        });
    </script>
</body>

</html>